import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts'; // 引入的组件部分
import '../market_2.css'; //内部样式的书写
export default function Ec3() {
  let [data, setDate] = useState([
    12, 5, 22, 13, 8, 5, 6, 21, 14, 12, 13, 10, 8, 8, 10, 8,
  ]);
  var myecharpie = null;
  let showpie = (arr) => {
    var echarts1_center3 = null;
    try {
      echarts1_center3 = document.querySelector('.echarts2_center1');
      myecharpie = echarts.init(echarts1_center3);
    } catch (error) {
      myecharpie && myecharpie.dispose();
    }
    var option = {
      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#000',
          rotate: 45,
        },
        axisLine: {
          lineStyle: {
            color: '#000',
          },
        },

        data: [
          '汽车制造商',
          '分销商',
          '加盟商',
          '零售商',
          '医院',
          '其他医疗机构',
          '医疗设备生产商',
          '土建工程公司',
          '安装工程公司',
          '工程设备贸易公司',
          '连锁商超',
          '食品贸易公司',
          '代理商',
          '直接客户',
          '电子产品制造商',
          '食品生产公司',
        ],
      },
      dataZoom: [
        {
          type: 'inside',
          show: true,
          // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          start: 0,
          // 数据窗口范围的结束百分比。范围是：0 ~ 100。
          end: 100,
          // zoomOnMouseWheel: 'ctrl',
          // 第一个 dataZoom 组件
          xAxisIndex: [0, 2], // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
        },
      ],
      yAxis: {
        type: 'value',
        name: '客户数量',
        nameGap: 30,
        nameTextStyle: {
          fontWeight: 'bolder',
          color: '#000',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000',
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        extraCssText: 'width:135px;height:60px;',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      series: [
        {
          data: arr,
          type: 'bar',
          itemStyle: {
            //上方显示数值
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: '#333',
                  fontSize: 13,
                },
              },
            },
          },
        },
      ],
    };
    option && myecharpie.setOption(option);
  };
  //颜色对象
  function Colors() {
    let r = Math.floor(Math.random() * 255);
    let g = Math.floor(Math.random() * 255);
    let b = Math.floor(Math.random() * 255);
    let color = 'rgb(' + r + ',' + g + ',' + b + ')';
    return color;
  }
  useEffect(() => {
    let arr = [];
    for (let i = 0; i <= data.length; i++) {
      arr.push({
        value: data[i],
        itemStyle: {
          color: Colors(),
        },
      });
    }
    showpie(arr);
  });
  useEffect(() => {
    return () => {
      myecharpie && myecharpie.dispose();
    };
  }, []);
  let show = () => {
    myecharpie.resize();
  };
  // 页面自适应重新绘制
  useEffect(() => {
    window.addEventListener('resize', show);
    return () => window.addEventListener('resize', show);
  }, []);

  return <div className="echarts2_center1" style={{}}></div>;
}
